<template>
  <div class="pageContain" style="color: black; width: calc(100% - 2vw)">
    <div class="pageTopContain divFlex">
      <el-select
        size="large"
        v-model="select"
        placeholder="设备类型"
        style="width: 15.4vw; color: black"
        @change="changeSelect()"
      >
        <el-option label="电表" :value="1"></el-option
        ><el-option label="燃气" :value="2"></el-option>
        <el-option label="水表" :value="3"></el-option
        ><el-option label="光伏" :value="4"></el-option>
      </el-select>
      <el-input
        v-model="input4"
        style="width: 23vw; height: 5vh; margin-left: 2vw; font-size: 1vw"
        placeholder="设备名称/电表ID"
      >
        <template #append>
          <el-icon class="el-input__icon" @click="handClick()"
            ><search
          /></el-icon>
        </template>
      </el-input>
    </div>
    <div class="tableContain" style="width: 92vw">
      <el-table
        :data="dataList"
        v-if="select == 1"
        border
        style="
          height: auto;

          margin-top: 2vh;
          width: calc(100% - 2vw);
        "
        max-height="65vh"
        :header-row-style="{
          height: '6vh',
          fontSize: '1vw',
          color: 'white',
          background:
            'linear-gradient(90deg, white 0%, #005EBC 5%, #005EBC 95%, white 100%)',
          borderBottom: '1px solid #EBEEF5',
          borderRight: '1px solid #EBEEF5',
        }"
      >
        <el-table-column
          prop="deviceName"
          label="设备名称"
          width="200"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.deviceName">{{ scope.row.deviceName }}</div>
            <div v-else>-</div>
          </template></el-table-column
        >
        <el-table-column
          prop="id"
          label="设备编号"
          align="center"
          min-width="300"
        >
          <template #default="scope">
            <div v-if="scope.row.id">{{ scope.row.id }}</div>
            <div v-else>-</div>
          </template></el-table-column
        >

        <el-table-column
          prop="ua"
          label="A相电压(V)"
          min-width="120"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.ua">{{ scope.row.ua }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="ub"
          label="B相电压(V)"
          min-width="120"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.ub">{{ scope.row.ub }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="uc"
          label="C相电压(V)"
          min-width="120"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.uc">{{ scope.row.uc }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="ia"
          label="A相电流(A)"
          align="center"
          min-width="120"
        >
          <template #default="scope">
            <div v-if="scope.row.ia">{{ scope.row.ia }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="ib"
          label="B相电流(A)"
          align="center"
          min-width="120"
        >
          <template #default="scope">
            <div v-if="scope.row.ib">{{ scope.row.ib }}</div>
            <div v-else>-</div>
          </template></el-table-column
        >
        <el-table-column
          prop="ic"
          label="C相电流(A)"
          min-width="120"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.ic">{{ scope.row.ic }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="pa"
          label="A相有功功率(KW)"
          align="center"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="pb"
          label="B相有功功率(KW)"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="pc"
          label="C相有功功率(KW)"
          min-width="120"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="pall"
          label="三相总有功功率(KW)"
          min-width="120"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.pall">{{ scope.row.pall }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="qa"
          label="A相无功功率(KVar)"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="qb"
          label="B相无功功率(KVar)"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="qc"
          label="C相无功功率(KVar)"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="qs"
          label="三相总无功功率(KVar)"
          min-width="120"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="hz"
          label="频率(Hz)"
          min-width="120"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.hz">{{ scope.row.hz }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="eng"
          label="总能耗(KWh)"
          align="center"
          min-width="150"
        >
          <template #default="scope">
            <div v-if="scope.row.eng">{{ scope.row.eng }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        :data="dataList"
        v-if="select == 4"
        border
        style="
          height: auto;

          margin-top: 2vh;
          width: calc(100% - 2vw);
        "
        max-height="65vh"
        :header-row-style="{
          height: '6vh',
          fontSize: '1vw',
          color: 'white',
          background:
            'linear-gradient(90deg, white 0%, #005EBC 5%, #005EBC 95%, white 100%)',
          borderBottom: '1px solid #EBEEF5',
          borderRight: '1px solid #EBEEF5',
        }"
      >
        <el-table-column
          prop="deviceName"
          label="设备名称"
          min-width="200"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.deviceName">{{ scope.row.deviceName }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="设备编号"
          min-width="200"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.id">{{ scope.row.id }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="eng"
          label="总能耗(KWh)"
          min-width="200"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.eng">{{ scope.row.eng }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="engPF"
          label="正向平电能(KWh)"
          align="center"
          min-width="200"
        >
          <template #default="scope">
            <div v-if="scope.row.engPF">{{ scope.row.engPF }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="engPP"
          label="正向峰电能(KWh)"
          min-width="200"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.engPP">{{ scope.row.engPP }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="engPT"
          label="正向尖电能(KWh)"
          min-width="200"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.engPT">{{ scope.row.engPT }}</div>
            <div v-else>-</div>
          </template></el-table-column
        >
        <el-table-column
          prop="engPV"
          label="正向谷电能(KWh)"
          min-width="200"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.engPV">{{ scope.row.engPV }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="engQ"
          label="反向有功电能(KWh)"
          min-width="200"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.engQ">{{ scope.row.engQ }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="engQF"
          label="反向平电能(KWh)"
          min-width="200"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.engQF">{{ scope.row.engQF }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="engQP"
          label="反向峰电能(KWh)"
          min-width="200"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.engQP">{{ scope.row.engQP }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="engQT"
          label="反向尖电能(KWh)"
          align="center"
          min-width="200"
        >
          <template #default="scope">
            <div v-if="scope.row.engQT">{{ scope.row.engQT }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="engQV"
          label="反向谷电能(KWh)"
          align="center"
          min-width="200"
        >
          <template #default="scope">
            <div v-if="scope.row.engQV">{{ scope.row.engQV }}</div>
            <div v-else>-</div>
          </template></el-table-column
        >
        <el-table-column
          prop="engPoQ"
          label="正向无功电能(KWh)"
          min-width="200"
          align="center"
        >
          <template #default="scope">
            <div v-if="scope.row.engPoQ">{{ scope.row.engPoQ }}</div>
            <div v-else>-</div>
          </template></el-table-column
        >
        <el-table-column
          prop="engNeQ"
          label="反向无功电能(KWh)"
          align="center"
          min-width="200"
        >
          <template #default="scope">
            <div v-if="scope.row.engNeQ">{{ scope.row.engNeQ }}</div>
            <div v-else>-</div>
          </template></el-table-column
        >
      </el-table>
    </div>
  </div>
</template>

<script>
// import EventBus from "@/mitt/eventBus.js";
import sendMessage from "@/mitt/sendMessage.js";
import service from "@/api/api";
export default {
  name: "",
  beforeRouteEnter(to, from, next) {
    sendMessage(2, "数据监控");
    next();
  },
  data() {
    return {
      select: 1,
      dataList: [
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "K25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
        {
          deviceName: "AL-1食堂空调",
          electId: "25060915000103",
          Ua: 223.24,
          Ub: 224.04,
          Uc: 223.9,
          la: 106,
          lb: 104,
          lc: 104,
          pa: 20,
          pb: 20,
          pc: 20,
          eng: 225,
          engQ: 0.27,
        },
      ],
      tableWidth: "",
      interval: "",
      input4: "",
    };
  },
  props: [],

  methods: {
    async getRenderList() {
      let that = this;
      if (this.interval) {
        clearTimeout(this.interval);
      }
      let data = {
        deviceType: this.select,
      };
      if (this.input4) {
        data = {
          deviceType: this.select,
          text: this.input4,
        };
      }
      let res = await service({
        method: "get",
        url: "/device/device-real-time-data",
        params: data,
      });
      try {
        if (res.status == "SUCCESS") {
          this.dataList = res.data;
          this.interval = setTimeout(function () {
            that.getRenderList();
          }, 10000);
        } else {
          this.$message({
            message: "获取设备失败",
            type: "warning",
          });
        }
      } catch (error) {}
      console.log(res);
    },
    handClick() {
      this.getRenderList();
    },
    handResize() {
      this.tableWidth = window.innerWidth - 150 + "px";
    },
    changeSelect() {
      this.getRenderList();
    },
  },
  created() {
    this.handResize();
  },
  mounted() {
    window.addEventListener("resize", this.handResize);
    this.getRenderList();
    // EventBus.emit("custom-event", { Active: 2, SonName: "数据监控" });
    // sessionStorage.setItem("Active", 2);
    // sessionStorage.setItem("SonName", "数据监控");
    console.log(sessionStorage.getItem("token"));
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handResize);
    clearTimeout(this.interval);
  },
};
</script>
<style lang="less" scoped>
.el-table {
  font-size: 1vw;
}
:deep(.el-table__cell) {
  padding: 0 !important;
}
:deep(.el-table__cell .cell) {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 3.5vh;
  padding: 0 !important;
  height: 7vh !important;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

:deep(.el-input-group__append) {
  box-shadow: 0 1px 0 0 #0281b8 inset, 0 -1px 0 0 #0281b8 inset,
    -1px 0 0 0 #0281b8 inset !important;
  background: #efefef !important;
}
:deep(.el-input__icon) {
  color: #5190cd !important;
}

// 设置select
.el-select {
  color: #5f5f5f !important;
}
:deep(.el-select__icon) {
  color: #5190cd !important;
}
:deep(.el-select__wrapper) {
  background: #efefef !important;
}
:deep(.el-select .el-select__wrapper) {
  height: 5vh !important;
  font-size: 1vw;
}
// 文字颜色
:deep(.el-select__selected-item) {
  display: flex;
  align-items: center;
  height: 5vh !important;
  color: #5f5f5f;
}
:deep(.el-select .el-input__inner) {
  color: #ff0000 !important; /* 红色文字 */
}
// 设置下拉框的样式
.el-select-dropdown__item {
  height: 5vh !important; /* 修改高度 */
  line-height: 5vh !important; /* 修改行高，保持与高度一致 */
  font-size: 1vw !important; /* 修改字体大小 */
}

:deep(.el-input__inner) {
  height: 5vh !important;
  border: 1px solid #0281b8;
  text-indent: 0.5vw;
  border-right: none !important;
  box-shadow: none !important;
  border-radius: 3px;
}
:deep(.el-input__wrapper) {
  background: #efefef !important;
  border-right: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 3px;
}
:depp(.el-input__icon) {
  color: #0281b8;
  border: 1px solid #0281b8;
}
</style>
